@import "./mixin.scss";

.main-header{
  position: relative;
  padding-left: 20px;
  background-color: $header-bgc;
  box-shadow: 0 2px 1px 1px hsla(0,0%,39%,.1);
  .menu{
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    &:hover{
      cursor: pointer;
    }
    .icon{
      font-size: 24px;
      &.rotate-icon{
        transform: rotate(-90deg);
      }
      &.menu-icon{
        transition: all .2s;
      }
    }
  }
  .dropDownMenu{
    .userName{
      @include ellipsis;
      display: inline-block;
      width: 80px;
      word-break: keep-all;
      vertical-align: middle;
      text-align: center;
    }
  }
}